import React, { useEffect } from 'react';
import { Button, Modal, Icon, NavBar } from 'antd-mobile';
import { List, Avatar, Spin } from 'antd';
import {
  QrcodeOutlined,
  DownSquareOutlined,
  SearchOutlined,
} from '@ant-design/icons';
import { useState } from 'react';
import { connect, history, useRequest } from 'umi';
import styles from './index.less';
import judgebind from '@/utils/judgebind';
import IconFont from '@/components/IconFont';
import checkCompany from '@/utils/checkCompany';
import { serviceinfo } from '@/services/user';

let Center = (props) => {
  let [visible, cv] = useState(false),
    [iftype, ciftype] = useState({
      title: '',
      img: '',
    }),
    [data, cdata] = useState({}),
    {
      global: { userinfo, companies },
      dispatch,
    } = props;

  useEffect(() => {
    serviceinfo({ company_id: companies?.id }).then((res) => {
      cdata(res?.data || {});
    });
  }, [companies]);

  return (
    <div>
      <List.Item className="totitle" style={{ padding: '36px 24px' }}>
        <List.Item.Meta
          avatar={
            <div
              style={{
                backgroundImage: `url(${
                  userinfo?.head_image
                    ? userinfo?.head_image
                    : require('@/assets/user.png')
                })`,
                width: '16vw',
                height: '16vw',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                backgroundSize: !userinfo?.head_image ? '60% auto' : 'contain',
                borderRadius: 500,
              }}
            />
          }
          title={
            <a
              style={{
                fontSize: 22,
                display: 'block',
                margin: '0px 0',
                color: '#fff',
              }}
            >
              {userinfo?.name ? userinfo?.name : '吾帮你'}
            </a>
          }
          description={
            <span
              style={{ display: 'block', margin: '4px 0 0 0', color: '#fff' }}
            >
              {companies?.name || '-'}
            </span>
          }
        />
        <div
          style={{ color: '#fff' }}
          onClick={() => {
            judgebind(!userinfo?.name, dispatch);
          }}
        >
          {!userinfo?.name ? '请绑定' : <span>绑定成功</span>}
        </div>
      </List.Item>
      <div className={styles.list}>
        <div
          className={styles.item}
          onClick={() => {
            ciftype({
              title: '会计: ' + data.account_name,
              image: data.account_code_url,
            });
            cv(true);
          }}
        >
          <IconFont
            type="icon-user"
            style={{ fontSize: 24, color: '#44cef6' }}
          />
          <span className="rows" style={{ color: '#44cef6' }}>
            我的会计
            <Icon type="right"></Icon>
          </span>
        </div>

        <div
          className={styles.item}
          onClick={() => {
            ciftype({
              title: '客服: ' + data.customer_name,
              image: data.customer_code_url,
            });
            cv(true);
          }}
        >
          <IconFont
            type="icon-kefu"
            style={{ fontSize: 24, color: '#6aab9c' }}
          />
          <span className="rows" style={{ color: '#6aab9c' }}>
            我的客服
            <Icon type="right"></Icon>
          </span>
        </div>

        <div
          className={styles.item}
          onClick={() => {
            checkCompany(false, dispatch);
          }}
        >
          <IconFont
            type="icon-qiehuan"
            style={{ fontSize: 22, color: '#4b5cc4' }}
          />
          <span className="rows" style={{ color: '#4b5cc4' }}>
            切换公司
            <Icon type="right"></Icon>
          </span>
        </div>

        <div
          className={styles.item}
          onClick={() => {
            history.push('/aboutus');
          }}
        >
          <IconFont type="icon-users" style={{ fontSize: 22 }} />
          <span className="rows">
            关于我们
            <Icon type="right"></Icon>
          </span>
        </div>

        <div
          className={styles.item}
          onClick={() => {
            history.push('/feedback');
          }}
        >
          <IconFont type="icon-tousujianyi" style={{ fontSize: 22 }} />
          <span className="rows" style={{ color: '#e0620d' }}>
            投诉列表
            <Icon type="right"></Icon>
          </span>
        </div>
      </div>

      <Modal
        visible={visible}
        onClose={() => cv(false)}
        title={iftype.title}
        transparent
        footer={[
          {
            text: '我知道了',
            onPress: () => {
              cv(false);
            },
          },
        ]}
      >
        <img
          src={iftype?.image || require('@/assets/default.png')}
          alt=""
          style={{ width: '100%' }}
        />
      </Modal>
    </div>
  );
};
export default connect(({ global, loading }) => ({
  global,
  loading,
}))(Center);
